CSS Grid 网格布局中新引入的 Fr 单位用法教程 – WEB骇客 | 您所在的位置:网站首页 › made in france是什么意思 › CSS Grid 网格布局中新引入的 Fr 单位用法教程 – WEB骇客 |
CSS grid 网格布局模块附带了一个新的 CSS 单位,名为 fr 。fr 是 “分数(fraction) “一词的缩写,简单明了。有了这个新单尾,我们就可以快速将网格按比例分割成不同的列或行。因此,创建完全响应和灵活的网格几乎变得轻而易举。 由于 fr 单位是与网格布局模块一起推出的,因此您可以在任何支持 CSS 网格的浏览器中使用它。 基本用法首先,让我们来看看使用 fr 单位的基本网格。下面的布局将空间划分为三列等宽和两行等高。 ![]() 假设 HTML 页面由六个标有 .box 类的 div 组成,位于一个 .wrapper div 内。 1. 2. 3. 4. 5. 6.要使用网格布局模块,需要在父容器元素上添加 display: grid; CSS 属性。grid-template-columns 属性使用 fr 单位作为值;三列的比例为 1:1:1。 对于网格行(grid-template-rows 属性),我没有使用 fr 单位,因为只有在父容器高度固定的情况下,使用 fr 单位才有意义。否则,在某些设备上会产生奇怪的结果,不过,即便如此,fr 单位仍能保持比例(这一点非常重要)。 gap 属性会在方框之间添加一个 10px 的网格。如果不需要任何间隙,只需删除该属性即可。 .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 10px; } .box { color: white; text-align: center; font-size: 30px; padding: 25px; }请注意,上面的 CSS 不包含一些基本样式,如背景颜色。您可以在文章末尾的演示中找到完整代码。 改变比例当然,你不能只使用 1:1:1,而是可以使用任何你想要的比例。下面,我使用了 1:2:1 的分数,同样将空间分为三列,但中间一列的宽度是其他两列的两倍。 ![]() 我还增加了 gap 的值,这样你就能看到它是如何改变布局的了。基本上,浏览器会从视口宽度中扣除网格间隙(在本例中,网格间隙加起来为 80px),然后根据给定的分数分割其余部分。 .wrapper { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 200px 200px; grid-gap: 40px; } 将 fr 与其他 CSS 单位组合您也可以将 fr 单位与任何其他 CSS 单位相结合。例如,在下面的示例中,我在网格中使用了 60% 1fr 2fr 的比例。 ![]() 那么,这是如何工作的呢?浏览器会将视口宽度的 60% 分配给第一列。然后,浏览器会将其余空间按 1:2 的比例分割。 同样的内容也可以写成 60% 13.33333% 26.66667%。但老实说,为什么有人要使用这种格式呢?分数单位的一个巨大优势是提高了代码的可读性。此外,它还完全准确,因为百分比格式加起来仍然只有 99.9999%。 .wrapper { display: grid; grid-template-columns: 60% 1fr 2fr; grid-template-rows: 200px 200px; grid-gap: 10px; }除了百分比,您还可以将其他 CSS 单位与分数单位一起使用,例如 pt、px、em 和 rem。 用 fr 添加空白如果你不想让你的设计杂乱无章,想在网格中添加一些空白,怎么办?fr 单元也有一个简单的解决方案。 ![]() 正如你所看到的,这个网格有一列是空的,但仍然保留了所有六个方框。对于这种布局,我们需要将空间分割成四列,而不是三列。因此,我们在 grid-template-columns 属性中使用了 1fr 1fr 1fr 1fr 值。 我们使用点符号在 grid-template-areas 属性中添加空列。基本上,该属性允许你引用已命名的网格区域。而且,你可以使用 grid-area 属性来命名网格区域,每个区域都需要单独使用。 .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 10px; grid-template-areas: "box-1 box-2 . box-3" "box-4 box-5 . box-6"; } .box-1 { grid-area: box-1; } .box-2 { grid-area: box-2; } .box-3 { grid-area: box-3; } .box-4 { grid-area: box-4; } .box-5 { grid-area: box-5; } .box-6 { grid-area: box-6; }空白区域不一定要形成一列,可以在网格的任何位置。 repeat() 函数您还可以将 fr 单位与 repeat() 函数结合使用,以获得更简单的语法。如果你只有一个简单的网格,这并不是必须的,但如果你想实现复杂的布局,例如嵌套网格,这就很有用了。 .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-rows: 200px; grid-gap: 10px; }repeat(3, 1fr) 语法的结果与 1fr 1fr 1fr 的布局相同。下面的布局与第一个示例相同。 ![]() 如果在 repeat() 函数中增加乘数,就会有更多列。例如,repeat(6, 1fr) 的结果是六列相等。在这种情况下,我们的所有方框都将位于同一行,这意味着只需为 grid-template-rows 属性使用一个值(200px)即可。 .wrapper { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 200px; grid-gap: 10px; }![]() 您可以多次使用 repeat()。例如,在下面的示例中,最后三列的宽度是前三列的两倍。 .wrapper { display: grid; grid-template-columns: repeat(3, 1fr) repeat(3, 2fr); grid-template-rows: 200px; grid-gap: 10px; }![]() 您还可以将 repeat() 与其他 CSS 单位结合使用。例如,你可以使用 200px repeat(4, 1fr) 200px 作为有效代码。 如果你对如何使用 CSS grid 网格模块、repeat()函数和 fr 单位创建复杂布局感兴趣,Rachel Andrew 有一篇有趣的博文介绍了如何做到这一点。 用于实验的演示最后,这是我承诺过的演示。它使用了与本文第一个示例相同的代码。运行它,看看你能用 fr 单位实现什么。 本文文字及图片出自 Guide to CSS Grid Layout Fr Unit
|
CopyRight 2018-2019 实验室设备网 版权所有 |